<template>
  <st-dialog :title="title"
             v-if="open"
             height="650px"
             width="900px"
             @close="cancel"
             @save="submitForm"
             append-to-body>
    <el-form ref="form" :model="form" :rules="rules" v-loading="loading" label-width="120px">
      <el-row>
        <el-col :span="11">
          <el-form-item label="客户名称：" prop="customerName">
            <el-input v-model="form.customerName" placeholder="请输入客户名称" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="客户性质：" prop="nature">
            <el-select v-model="form.nature" placeholder="请输入客户性质">
              <el-option
                v-for="dict in dict.type.customer_nature"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="客户来源：" prop="source">
            <el-select v-model="form.source" placeholder="请输入客户来源">
              <el-option
                v-for="dict in dict.type.customer_source"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="客户行业：" prop="industry">
            <el-select v-model="form.industry" placeholder="请输入客户行业">
              <el-option
                v-for="dict in dict.type.customer_industry"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="客户分级：" prop="grade">
            <el-select v-model="form.grade" placeholder="请输入客户分级">
              <el-option
                v-for="dict in dict.type.customer_grade"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="客户阶段：" prop="stage">
            <el-select v-model="form.stage" placeholder="请输入客户阶段">
              <el-option
                v-for="dict in dict.type.customer_stage"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="客户类型：" prop="importance">
            <el-select v-model="form.type" placeholder="请输入客户类型">
              <el-option
                v-for="dict in dict.type.customer_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="客户官网：" prop="website">
            <el-input v-model="form.website" placeholder="请输入客户官网" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="重要程度：" prop="importance">
            <el-rate
              style="text-align: left;margin-top:5px;"
              v-model="form.importance">
            </el-rate>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="销售负责人：" prop="ownerUserId">
            <el-input v-model="form.ownerUserId" placeholder="请输入销售负责人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="售后负责人：" prop="saUserId">
            <el-input v-model="form.saUserId" placeholder="请输入售后负责人" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="下次联系时间：" prop="saUserId">
            <el-date-picker
              v-model="form.nextContactTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请输入下次联系时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="15">
          <el-form-item label="所属区域：">
            <st-distpicker
              :province="areaData[0]"
              :city="areaData[1]"
              :area="areaData[2]"
              @province="selectProvince"
              @city="selectCity"
              @area="selectArea"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="详细地址：" prop="address">
            <el-input v-model="form.address" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="客户简介：" prop="introduction">
            <el-input v-model="form.introduction" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="22">
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </st-dialog>
</template>
<script>
import StDistpicker from "@/components/StDistpicker/index.vue";
import {updateCustomer, addCustomer, getCustomer} from '@/api/crm/customer'
export default {
  components: {StDistpicker},
  dicts: [
    'customer_nature',
    'customer_source',
    'customer_industry',
    'customer_grade',
    'customer_stage',
    'customer_type'
  ],
  data() {
    return {
      loading:false,
      title:'',
      open:false,
      form:{},
      rules:{},
      areaData:[],
    }
  },
  methods: {
    show(data){
      this.open=true;
      this.reset();
      if(typeof data == 'undefined'){
        this.title='新增客户';
      }else{
        this.title='修改客户';
        this.loading=true;
        getCustomer(data.customerId).then(response => {
          this.form = response.data;
          if(typeof this.form.provinceId != "undefined" && this.form.provinceId != null) {
            this.$set(this.areaData,0,+this.form.provinceId)
          }
          if(typeof this.form.cityId != "undefined" && this.form.cityId != null) {
            this.$set(this.areaData,1,+this.form.cityId)
          }
          if(typeof this.form.areaId != "undefined" && this.form.areaId != null) {
            this.$set(this.areaData,2,+this.form.areaId)
          }
          this.loading=false;
        });
      }

    },
    // 表单重置
    reset() {
      this.areaData.length=0;
      this.form = {
        customerId: null,
        customerName: null,
        nature: null,
        source: null,
        industry: null,
        grade: null,
        stage: null,
        website: null,
        type: null,
        introduction: null,
        importance: null,
        lockStatus: null,
        address: null,
        provinceId: null,
        cityId: null,
        areaId: null,
        ownerUserId: null,
        saUserId: null,
        deltag: null,
        remark: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null

      };
      this.resetForm("form");
    },
    cancel(){
      this.open=false;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.customerId != null) {
            updateCustomer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit('updateParams', this.form);
            });
          } else {
            addCustomer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

  }
}
</script>
<style scoped lang="scss">

</style>
